<template>
	<div>
		<div class="title">{{ $t('会员账号信息') }}</div>
		<el-table
			v-loading="personalLoading"
			border
			size="mini"
			:data="memberDatas"
			style="width: 100%"
		>
			<el-table-column
				align="center"
				:label="`${$t('common.member_number')}`"
				prop="userName"
			>
				<template slot-scope="scope">
					{{ scope.row.userName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				:label="`${$t('funds.fund_audit.belong_proxy')}`"
				prop="parentProxyName"
			>
				<template slot-scope="scope">
					{{ scope.row.parentProxyName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				:label="`${$t('common.belong_merchant')}`"
				prop="merchantName"
			>
				<template slot-scope="scope">
					{{ scope.row.merchantName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="accountStatus"
				align="center"
				:label="$t('common.account_status')"
				:min-width="getWidth(100)"
			>
				<template slot-scope="scope">
					<span
						v-if="!!scope.row.paymentLockStatus"
						class="deleteRgba"
					>
						{{ $t('common.account_lock_status') }}
						<br />
					</span>
					<span
						v-if="!!scope.row.loginLockStatus"
						class="disableRgba"
					>
						{{ $t('common.login_lock_status') }}
						<br />
					</span>
					<span v-if="!!scope.row.gameLockStatus" class="lockingRgba">
						{{ $t('common.game_lock_status') }}
					</span>
					<span
						v-if="
							scope.row.loginLockStatus === 0 &&
								scope.row.gameLockStatus === 0 &&
								scope.row.paymentLockStatus === 0
						"
						class="normalRgba"
					>
						{{ $t('common.account_status_normal') }}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				:label="`${$t('common.register_time')}`"
				prop="createdAt"
			>
				<template slot-scope="scope">
					{{ scope.row.createdAt || '-' }}
				</template>
			</el-table-column>
		</el-table>
		<div class="title mt30">
			{{ getFormateDate(row.reportYm, 'ym')
			}}{{ $t('期代理返佣包含会员返水列表') }}
		</div>
		<el-table
			v-loading="rebateLoading"
			border
			size="mini"
			:data="rebateDatas"
			style="width: 100%"
			:header-cell-style="getRowClass"
			element-loading-spinner="el-icon-loading"
			highlight-current-row
		>
			<el-table-column align="center" label="#" type="index" width="100">
				<template slot-scope="scope">
					<span>
						{{ scope.$index + 1 }}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				:label="`${$t('funds.fund_audit.settlement_number_periods')}`"
			>
				<template slot-scope="scope">
					{{ scope.row.reportDate }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				:label="$t('funds.fund_audit.return_water_status')"
				prop="payoutStatus"
			>
				<template slot-scope="scope">
					{{ bounsPayoutStatusMap[scope.row.payoutStatus] || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				:label="`${$t('funds.fund_audit.person_return_water')}`"
				prop="personRebateAmount"
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.currency,
							scope.row.personRebateAmount
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				prop="auditStep"
				align="center"
				:label="$t('common.actions')"
				min-width="150"
			>
				<template slot-scope="scope">
					<el-button
						type="primary"
						size="medium"
						@click="openMemberBounsDetail(scope.row)"
					>
						{{ $t('common.check_detail') }}
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination
			v-show="!!total"
			class="text-right"
			:current-page.sync="pageNum"
			background
			layout="total, sizes,prev, pager, next, jumper"
			:page-size.sync="pageSize"
			:page-sizes="pageSizes"
			:total="total"
			:pager-count="9"
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
		></el-pagination>
		<!-- 查看个人返水明细 -->
		<el-dialog
			v-if="memberBonusDetail.visible"
			width="800px"
			title="个人返水明细"
			:visible="memberBonusDetail.visible"
			:close-on-click-modal="true"
			:destroy-on-close="true"
			:before-close="closeMemberBounsDetail"
			@close="closeMemberBounsDetail"
			center
		>
			<p class="title mt20">{{ $t('个人返水明细') }}</p>
			<el-table
				v-loading="personalLoading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="personalDatas"
				style="width: 100%"
				:header-cell-style="getRowClass"
				highlight-current-row
			>
				<el-table-column
					align="center"
					:label="`${$t('report.project')}`"
					prop="venueName"
					min-width="80px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.venueName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="$t('funds.fund_audit.person_return_water')"
					prop="rebateAmount"
					min-width="180px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ handleNumber(row.currency, scope.row.rebateAmount) }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="
						`${$t('funds.proxy_member_funds_record.rebate_ratio')}`
					"
					prop="rebateRate"
					min-width="180px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ handlePercentage(scope.row.rebateRate) }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="`${$t('member.effective_betting')}`"
					prop="validBetAmount"
					min-width="180px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(row.currency, scope.row.validBetAmount)
						}}
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>
<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { bounsPayoutStatusMap } from '@/dict/funds'
export default {
	components: {},
	mixins: [list],
	props: {
		selectedData: {
			type: Object,
			default: {}
		},
		row: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			personalLoading: false,
			personalDatas: [],
			memberLoading: false,
			memberData: {},
			rebateLoading: false,
			rebateDatas: [],
			memberBonusDetail: {
				visible: false
			},
			bounsPayoutStatusMap
		}
	},
	computed: {
		memberDatas() {
			if (this.memberData?.userName) {
				return [this.memberData]
			} else {
				return []
			}
		}
	},
	watch: {
		selectedData: {
			handler(next) {
				if (next.type === 2 && next.userName) {
					this.getMemberByUserName()
					this.getMemberRateDetailPage()
				}
			},
			immediate: true
		}
	},
	methods: {
		// 获取会员账号信息
		async getMemberByUserName() {
			this.memberLoading = true
			this.memberData = {}
			await this.$api
				.getOutlineInfo({
					userName: this.selectedData.userName,
					merchantId: this.row.merchantId
				})
				.then((res) => {
					this.memberData = res?.data || {}
					this.memberLoading = false
				})
				.catch(() => {
					this.memberData = {}
					this.memberLoading = false
				})
		},
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.getMemberRateDetailPage()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.getMemberRateDetailPage()
		},
		// 获取会员返水列表
		async getMemberRateDetailPage() {
			this.rebateLoading = true
			this.rebateDatas = []
			const params = {
				...this.getParams(),
				memberId: this.selectedData?.id,
				reportStartDate: this.row?.cycleStartDate,
				reportEndDate: this.row?.cycleEndDate,
				payoutStatusList: [3]
			}
			await this.$api
				.getMemberRebateAuditDetailPage(params)
				.then((res) => {
					this.rebateDatas = res.data?.record || []
					this.total = res.data?.totalRecord || 0
					this.rebateLoading = false
				})
				.catch(() => {
					this.rebateDatas = []
					this.rebateLoading = false
				})
		},
		// 查看会员返水详情
		async openMemberBounsDetail(row) {
			this.memberBonusDetail.visible = true
			this.personalLoading = true
			await this.$api
				.getMemberRebateTeamRebate({
					id: this.memberData.id,
					reportDate: dayjs(String(row.reportDate)).format('YYYYMMDD')
				})
				.then((res) => {
					this.personalDatas = res?.data || []
					this.personalLoading = false
				})
				.catch(() => {
					this.personalDatas = []
					this.personalLoading = false
				})
		},
		// 关闭会员返水详情弹窗
		closeMemberBounsDetail() {
			this.memberBonusDetail.visible = false
		}
	}
}
</script>
<style lang="scss" scoped>
.title {
	margin-bottom: 10px;
	font-weight: bold;
	font-size: 18px;
}
</style>
